<template>
    <div>
      <div class="acy-hed">
        <img @click="bac33()" :src="'./static/lyl/back.png'" alt="">
        <span>发起活动</span>
      </div>
      <div class="acy-content">
        <div class="acy-d1">
          <span>
            <span>*</span>节目名称：
          </span>
          <input v-model="jiemu" type="text" placeholder="请输入姓名">
        </div>
        <div class="acy-d1">
          <span>
            <span>*</span>报名时间：
          </span>
          <span @click="show11()">{{applystart}}</span><span></span><span @click="show22()">{{applyover}}</span>
        </div>
        <div class="acy-d1">
          <span>
            <span>*</span>举办时间：
          </span>
          <span @click="show33()">{{holdstart}}</span><span></span><span @click="show44()">{{holdover}}</span>
        </div>
        <div class="acy-d1">
          <span>
            <span>*</span>活动地址：
          </span>
          <span @click="show55">{{provi}}</span><span></span><span @click="show55">{{citys}}</span><br>
          <input v-model="Detailed" class="inou" type="text" placeholder="详细街道">
        </div>

        <div class="acy-d1 pull-down">
          <span>
            <span>*</span>活动分类：
          </span>
          <span>
            {{classnames2}}
            <ul v-if="ulbol1">
               <li @click="checkeds1(item)" v-for="(item,index) in classnames" :key="index">{{item}}</li>
            </ul>
          </span><span @click="ulbol11()"><img :src="'./static/lyl/xiasan.png'" alt=""></span>

        </div>
        <div class="acy-d1 pull-down">
          <span>
            <span>*</span>活动人群：
          </span>
          <span>
            {{actycrow2}}
            <ul v-if="ulbol2">
               <li @click="checkeds2(item)" v-for="(item,index) in actycrow" :key="index">{{item}}</li>
            </ul>
          </span><span @click="ulbol22()"><img :src="'./static/lyl/xiasan.png'" alt=""></span>

        </div>
        <div class="acy-d1 pull-down">
          <span>
            <span>*</span>活动类型：
          </span>
          <span>
            {{actytype2}}
            <ul v-if="ulbol3">
               <li @click="checkeds3(item)" v-for="(item,index) in actytype" :key="index">{{item}}</li>
            </ul>
          </span><span @click="ulbol33()"><img :src="'./static/lyl/xiasan.png'" alt=""></span>

        </div>

        <div class="acy-d1">
          <span>
            <span>*</span>主办方&nbsp&nbsp&nbsp：
          </span>
          <input v-model="sponsor" type="text" placeholder="请输入主办方">
        </div>
        <div class="acy-d1">
          <span>
            <span>*</span>联系人&nbsp&nbsp&nbsp：
          </span>
          <input v-model="linkmans" type="text" placeholder="请输入联系人姓名">
        </div>
        <div class="acy-d1">
          <span>
            <span>*</span>联系方式：
          </span>
          <input v-model="contactw" type="text" placeholder="请输入联系方式">
        </div>

        <button @click="promotional()">提交</button>
      </div>

      <van-popup v-model="show1" position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="报名开始时间"
          @confirm="onconfirm1($event)"
          @cancel="oncancel1"
        />
      </van-popup>
      <van-popup v-model="show2" position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="报名结束时间"
          @confirm="onconfirm2($event)"
          @cancel="oncancel2"
        />
      </van-popup>
      <van-popup v-model="show3" position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="举办开始时间"
          @confirm="onconfirm3($event)"
          @cancel="oncancel3"
        />
      </van-popup>
      <van-popup v-model="show4" position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="举办结束时间"
          @confirm="onconfirm4($event)"
          @cancel="oncancel4"
        />
      </van-popup>
      <van-popup v-model="show5" position="bottom">
        <van-area :area-list="areaList" :columns-num="2" title="省市选择" value="110101" @confirm="onconfirm5($event)" @cancel="oncancel5"/>
      </van-popup>
    </div>
</template>

<script>
  import areaList from '../../../areaList'
  import * as list from "../../../api/list.js";
  import { Dialog } from 'vant'
  export default {
      name: "Activity",
      data(){
        return {
          jiemu:'',
          areaList:areaList,
          currentDate: new Date(),
          applystart:'',
          applyover:'',
          holdstart:'',
          holdover:'',
          show1:false,
          show2:false,
          show3:false,
          show4:false,
          show5:false,
          provi:'省份',
          citys:'城市',
          Detailed:'',
          sponsor:'',
          linkmans:'',
          contactw:'',
          classnames2:'儿童舞',
          classnames:['儿童舞','广场舞','拉丁舞','流行舞'],
          actycrow2:'少儿',
          actycrow:['少儿','成年','少年','老人'],
          actytype2:'官方',
          actytype:['官方','群众','自发','非官方'],
          ulbol1:false,
          ulbol2:false,
          ulbol3:false
        }
      },
      mounted(){
        mui.back = function() {
          window.history.go(-1);
        }
      },
      methods:{
        bac33(){
          history.go(-1)
        },
        show11(){
          this.show1 = true;
        },
        show22(){
          this.show2 = true;
        },
        show33(){
          this.show3 = true;
        },
        show44(){
          this.show4 = true;
        },
        show55(){
          this.show5 = true;
        },
        onconfirm1(e){
          var date = new Date(e);
          this.applystart = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
          this.show1 = false;
        },
        oncancel1(){
          this.show1 = false;
        },
        onconfirm2(e){
          var date = new Date(e);
          this.applyover = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
          this.show2 = false;
        },
        oncancel2(){
          this.show2 = false;
        },
        onconfirm3(e){
          var date = new Date(e);
          this.holdstart = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
          this.show3 = false;
        },
        oncancel3(){
          this.show3 = false;
        },
        onconfirm4(e){
          var date = new Date(e);
          this.holdover = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
          this.show4 = false;
        },
        oncancel4(){
          this.show4 = false;
        },
        onconfirm5(e){
          this.provi = e[0].name;
          this.citys = e[1].name;
          this.show5 = false;
        },
        oncancel5(){
          this.show5 = false;
        },
        ulbol11(){
          this.ulbol1 = !this.ulbol1;
          this.ulbol2 = false;
          this.ulbol3 = false;
        },
        checkeds1(ite){
          this.classnames2 = ite;
          this.ulbol1 = false;
        },
        ulbol22(){
          this.ulbol2 = !this.ulbol2;
          this.ulbol1 = false;
          this.ulbol3 = false;
        },
        checkeds2(ite){
          this.actycrow2 = ite;
          this.ulbol2 = false;
        },
        ulbol33(){
          this.ulbol3 = !this.ulbol3;
          this.ulbol1 = false;
          this.ulbol2 = false;
        },
        checkeds3(ite){
          this.actytype2 = ite;
          this.ulbol3 = false;
        },
        promotional(){
          if (this.jiemu.length==0||this.applystart.length==0||this.applyover.length==0||this.holdstart.length==0||this.holdover.length==0||this.provi.length==0||this.citys.length==0||this.Detailed.length==0||this.classnames2.length==0||this.actycrow2.length==0||this.actytype2.length==0||this.sponsor==0||this.linkmans.length==0||this.contactw.length==0){
            Dialog.alert({
              message: '请完善发起活动信息'
            })
          }else{
            let parms = {
              name:this.jiemu,
              sign_up_start_time:this.applystart,
              sign_up_end_time:this.applyover,
              hold_start_time:this.holdstart,
              hold_end_time:this.holdover,
              address:this.provi+this.citys+this.Detailed,
              classify:this.classnames2,
              crowd:this.actycrow2,
              type:this.actytype2,
              sponsor:this.sponsor,
              linkman:this.linkmans,
              mobile:this.contactw
            };
            list.startActive(parms).then(res=>{
              Dialog.alert({
                message: res.msg
              }).then(() => {
                history.go(-1)
              });
            });
          }
        }
      }
    }
</script>

<style scoped>
  .acy-hed{
    padding: 20px 40px;
    border-bottom: 2px solid #dcdcdc;
  }
  .acy-hed img{
    width: 26px;
    height: 44px;
    margin-right: 40px;
  }
  .acy-hed span{
    font-size: 36px;
    vertical-align: top;
  }
  .acy-content{
    padding: 30px 40px;
  }
  .acy-content .acy-d1{
    display: flex;
    flex-wrap: wrap;
  }
  .acy-content .acy-d1 span:nth-child(1){
    font-size: 28px;
    line-height: 90px;
  }
  .acy-content .acy-d1 span:nth-child(1) span{
    color: #e32c1a;
    font-size: 28px;
    vertical-align: bottom;
    margin-right: 10px;
  }
  .acy-content .acy-d1 input{
    width: 444px;
    height: 50px;
    border: 2px solid #dcdcdc;
    padding-left: 10px;
    font-size: 24px;
    color: #adadad;
    align-self: center;
  }
  .acy-content .acy-d1 span:nth-child(2){
    width: 140px;
    height: 60px;
    border: 2px solid #dcdcdc;
    align-self: center;
    font-size: 24px;
    color: #adadad;
    text-align: center;
    line-height: 60px;
    background: #fff;
  }
  .acy-content .acy-d1 span:nth-child(3){
    width: 26px;
    height: 0;
    border: 2px solid #dcdcdc;
    align-self: center;
    margin: 0 30px;
  }
  .acy-content .acy-d1 span:nth-child(4){
    width: 140px;
    height: 60px;
    border: 2px solid #dcdcdc;
    align-self: center;
    font-size: 24px;
    color: #adadad;
    text-align: center;
    line-height: 60px;
    background: #fff;
  }
  .inou{
    margin:30px 0 30px 160px;
  }
  .acy-content .pull-down span:nth-child(2){
    width: 270px;
    position: relative;
  }
  ul{
    position: absolute;
    left: -2px;
    top: 60px;
    z-index: 9;
    background: #fff;
    width: 100%;
    border: 2px solid #dcdcdc;
  }
  ul li{
    border-bottom: 2px solid #dcdcdc;
  }
  ul li:last-child{
    border-bottom: none;
  }
  .acy-content .pull-down span:nth-child(3){
    width: 36px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    margin: 0;
    border-left: 0;
  }
  .acy-content .pull-down span:nth-child(3) img{
    width: 12px;
    height: 10px;
  }
  .acy-content button{
    width: 100%;
    background: #884ca4;
    font-size: 36px;
    color: #fff;
    height: 80px;
    border-radius: 10px;
    margin-top: 160px;
  }
</style>
